<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      :title="'进场人员管理' + (state.type ? '查看' : '新增')"
      width="40%"
      align-center
      @open="openDialog"
      @close="closeDialog"
      class="dialogStyle"
    >
      <el-form
        :model="formInline"
        ref="formRef"
        :rules="!state.type ? rules : []"
        label-width="120px"
        :disabled="state.type"
      >
        <el-form-item label="姓名" prop="workerName">
          <el-input v-model="formInline.workerName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCardNo">
          <el-input v-model="formInline.idCardNo" placeholder="请输入身份证号码" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankAccountNumber">
          <el-input
            v-model="formInline.bankAccountNumber"
            placeholder="请输入银行卡号"
            maxlength="18"
            @change="change"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="workerPhone">
          <el-input v-model.number="formInline.workerPhone" placeholder="请输入联系电话" maxlength="11" />
        </el-form-item>
        <el-form-item label="工日" prop="workDayCount">
          <el-input v-model.number="formInline.workDayCount" placeholder="请输入工日"  />
        </el-form-item>

        <el-form-item label="应发金额" prop="payableAmount">
          <el-input v-model.number="formInline.payableAmount"  placeholder="请输入应发金额"/>
        </el-form-item>
        <el-form-item label="借支"  prop="debitAmount">
          <el-input v-model.number="formInline.debitAmount"  placeholder="请输入借支"/>
        </el-form-item>
        <el-form-item label="实发金额" prop="paidAmount">
          <el-input v-model.number="formInline.paidAmount"  placeholder="请输入实发金额"/>
        </el-form-item>
        <el-form-item label="签字盖手印" label-width="82px" style="margin-left: -76px!important;">
          <FileMinioUpload
            :type="'file'"
            :restriction="true"
            :restrictionLimit="9"
            @updateFiles="updateFiles"
            :businessType="22"
            :associationId="'1'"
            v-model:files="formInline.files"
            :disabled="state.type"
            :show-button="!state.type"
          />
        </el-form-item>
        <el-form-item ></el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">关闭</el-button>
          <el-button v-if="!state.type" @click="submitHandler(formRef)" class="button_view">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import { approachApi } from '@/api/project'
import { ref, reactive, nextTick } from 'vue'
import {
  ElDialog,
  ElForm,
  ElFormItem,
} from 'element-plus'

const formRef = ref(null)
// 上传的图片附件
const updateFiles = (list) => {
  if (list.length > 0) {
    console.log(list)
  }
}
let state = reactive({
  type: 0,
  centerDialogVisible: false,
  projectId: null,
  projectStageId: null
})
const rules = {
  workerName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  idCardNo: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: '请输入正确的身份证号码',
      trigger: ['blur']
    }
  ],
  // bankAccountNumber: [
  //   { required: true, message: '请输入银行卡号', trigger: 'blur' },
  //   {
  //     pattern: /^\d{9,18}$/,
  //     message: '请输入正确的银行卡号',
  //     trigger: ['blur']
  //   }
  // ],
  // workerPhone: [
  //   { required: true, message: '请输入联系电话', trigger: 'blur' },

  //   {
  //     pattern: /^1[3-9]\d{9}$/,
  //     message: '请输入正确的联系电话',
  //     trigger: ['blur']
  //   }
  // ],
  // workDayCount: [
  //   { required: true, message: '请选择工日', trigger: 'blur' },
  //   { type: 'number', message: '请输入数字类型' }
  // ],

  // payableAmount: [
  //   { required: true, message: '请输入应发金额', trigger: 'blur' },
  //   { type: 'number', message: '请输入数字类型' }
  // ],
  // debitAmount: [
  //   { required: true, message: '请输入借支', trigger: 'blur' },
  //   { type: 'number', message: '请输入数字类型' }
  // ],
  // paidAmount: [
  //   { required: true, message: '请输入实发金额', trigger: 'blur' },
  //   { type: 'number', message: '请输入数字类型' }
  // ]
}
const formInline = reactive({
  workerName: '',
  idCardNo: '',
  bankAccountNumber: '',
  workerPhone: '',
  payableAmount: '',
  debitAmount: '',
  paidAmount: '',
  paidAmount: '',
  files: []
})
// 向父组件传值
const emits = defineEmits(['refreshList'])
const submitHandler = async (formRef) => {
  await formRef.validate((valid) => {
    if (valid) {
      approachApi
        .savePeople({
          ...formInline,
          projectId: state.projectId,
          projectStageId: state.projectStageId
        })
        .then((res) => {
          if (res.code == 200) {
            state.centerDialogVisible = false
            // 刷新列表
            emits('refreshList')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  })
}
const change = (val) => {
  console.log(val)
}

const closeDialog = () => {
  Object.keys(formInline).forEach((key) => {
    if (key == 'files') {
      formInline[key] = []
    } else {
      formInline[key] = ''
    }
  })
}
const openDialog = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
  Object.keys(formInline).forEach((key) => {
    if (key == 'files') {
      formInline[key] = []
    } else {
      formInline[key] = ''
    }
  })

  if (state.type) {
    console.log('---', state.type)
    //查看
    approachApi.getPeople(state.workerId).then((res) => {
      if (res.code == 200) {
        Object.keys(formInline).forEach((key) => {
          formInline[key] = res.data[key]
        })
      }
    })
  }
}
defineExpose({
  state
})
</script>
<style lang="scss" scoped>
.el-dialog__body .el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
